<template>
  <div id="playerUI">
    <div id="player"></div>
    <!-- <div id="videoPlayOverlay"></div> -->
    <div id="overlay" class="overlay text-light bg-dark">
      <div class="status-top">
        <div id="qualityStatus" class="greyStatus"></div>
        <div id="overlayButton">
          <img src="../assets/images/ueImg/add.png" alt="" />
        </div>
      </div>
      <div id="overlaySettings">
        <div id="kickOthers">
          <div class="settings-text">Kick all other players</div>
          <label class="btn-overlay">
            <input
              type="button"
              id="kick-other-players-button"
              class="overlay-button btn-flat"
              value="Kick"
            />
          </label>
        </div>
        <div id="fillWindow">
          <div class="settings-text">Enlarge Display to Fill Window</div>
          <label class="tgl-switch">
            <input
              type="checkbox"
              id="enlarge-display-to-fill-window-tgl"
              class="tgl tgl-flat"
              checked
            />
            <div class="tgl-slider"></div>
          </label>
        </div>
        <div id="qualityControlOwnership">
          <div class="settings-text">Quality control ownership</div>
          <label class="tgl-switch">
            <input
              type="checkbox"
              id="quality-control-ownership-tgl"
              class="tgl tgl-flat"
            />
            <div class="tgl-slider"></div>
          </label>
        </div>
        <br />

        <section id="encoderSettings">
          <div class="settings-text">Encoder Settings</div>
          <div id="encoderParamsContainer" class="collapse">
            <div class="form-group">
              <label for="encoder-rate-control" class="settings-text"
                >Rate Control</label
              >
              <select id="encoder-rate-control">
                <option value="CBR" selected>CBR</option>
                <option value="VBR">VBR</option>
                <option value="ConstQP">ConstQP</option>
              </select>
              <label for="encoder-target-bitrate-text"
                >Target Bitrate (kbps)</label
              >
              <input
                type="number"
                class="form-control"
                id="encoder-target-bitrate-text"
                value="0"
                min="0"
                max="100000"
              />
              <label for="encoder-max-bitrate-text">Max Bitrate (kbps)</label>
              <input
                type="number"
                class="form-control"
                id="encoder-max-bitrate-text"
                value="0"
                min="0"
                max="100000"
              />
              <label for="encoder-min-qp-text">Min QP</label>
              <input
                type="number"
                class="form-control"
                id="encoder-min-qp-text"
                value="0"
                min="0"
                max="999"
              />
              <label for="encoder-max-qp-text">Max QP</label>
              <input
                type="number"
                class="form-control"
                id="encoder-max-qp-text"
                value="0"
                min="0"
                max="999"
              />
              <label for="encoder-multipass" class="settings-text"
                >Multipass</label
              >
              <select id="encoder-multipass">
                <option value="DISABLED" selected>DISABLED</option>
                <option value="QUARTER">QUARTER</option>
                <option value="FULL">FULL</option>
              </select>
              <div class="settings-text">Filler Data</div>
              <label class="tgl-switch">
                <input
                  type="checkbox"
                  id="encoder-filler-data-tgl"
                  class="tgl tgl-flat"
                />
                <div class="tgl-slider"></div>
              </label>
            </div>
            <input
              id="encoder-params-submit"
              class="btn btn-primary btn-lg mt-3"
              type="button"
              value="Apply"
            />
          </div>
          <br />
        </section>

        <section id="webRTCSettings">
          <div class="settings-text">WebRTC Settings</div>
          <div id="webrtcParamsContainer" class="collapse">
            <div class="form-group">
              <label for="webrtc-degradation-pref">Degradation Pref</label>
              <select id="webrtc-degradation-pref">
                <option value="BALANCED">BALANCED</option>
                <option value="MAINTAIN_FRAMERATE">MAINTAIN_FRAMERATE</option>
                <option value="MAINTAIN_RESOLUTION">MAINTAIN_RESOLUTION</option>
              </select>
              <label for="webrtc-max-fps-text">Max FPS</label>
              <input
                type="number"
                class="form-control"
                id="webrtc-max-fps-text"
                value="1"
                min="1"
                max="999"
              />
              <label for="webrtc-min-bitrate-text">Min Bitrate (kbps)</label>
              <input
                type="number"
                class="form-control"
                id="webrtc-min-bitrate-text"
                value="0"
                min="0"
                max="100000"
              />
              <label for="webrtc-max-bitrate-text">Max Bitrate (kbps)</label>
              <input
                type="number"
                class="form-control"
                id="webrtc-max-bitrate-text"
                value="0"
                min="0"
                max="100000"
              />
              <label for="webrtc-low-qp-text">Low QP Threshold</label>
              <input
                type="number"
                class="form-control"
                id="webrtc-low-qp-text"
                value="0"
                min="0"
                max="999"
              />
              <label for="webrtc-high-qp-text">High QP Threshold</label>
              <input
                type="number"
                class="form-control"
                id="webrtc-high-qp-text"
                value="0"
                min="0"
                max="999"
              />
            </div>
            <input
              id="webrtc-params-submit"
              class="btn btn-primary btn-lg mt-3"
              type="button"
              value="Apply"
            />
          </div>
        </section>
        <br />

        <div id="showFPS">
          <div class="settings-text">Show FPS</div>
          <label class="btn-overlay">
            <input
              type="button"
              id="show-fps-button"
              class="overlay-button btn-flat"
              value="Toggle"
            />
          </label>
        </div>
        <div id="matchViewportResolution">
          <div class="settings-text">Match Viewport Resolution</div>
          <label class="tgl-switch">
            <input
              type="checkbox"
              id="match-viewport-res-tgl"
              class="tgl tgl-flat"
            />
            <div class="tgl-slider"></div>
          </label>
        </div>

        <div id="statsPanel">
          <div class="settings-text">Show Stats</div>
          <label class="tgl-switch">
            <input
              type="checkbox"
              id="show-stats-tgl"
              class="tgl tgl-flat"
              checked
            />
            <div class="tgl-slider"></div>
          </label>
          <div id="statsContainer" class="statsContainer">
            <div id="stats" class="stats"></div>
          </div>
          <br />
        </div>

        <div id="latencyTest">
          <div class="settings-text">Latency Stats</div>
          <label class="btn-overlay">
            <input
              type="button"
              id="test-latency-button"
              class="overlay-button btn-flat"
              value="Test Latency"
            />
          </label>
          <div id="latencyStatsContainer" class="statsContainer">
            <div id="LatencyStats" class="stats">No stats yet...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { app_load } from "@/utils/ueTool/app";

onMounted(() => {
  // app_load("5.5.5.31:80", () => {
  app_load("172.17.2.2:80", () => {
    console.log("画面出现之前的回调，可进行一些初始操作");
  });
});
</script>

<style scoped>
/*Copyright Epic Games, Inc. All Rights Reserved.*/

:root {
  /*Using colour scheme https://color.adobe.com/TD-Colors---Option-3-color-theme-10394433/*/
  --colour1: #2b3a42;
  --colour2: #3f5765;
  --colour3: #bdd4de;
  --colour4: #efefef;
  --colour5: #ff5035;

  --buttonFont: Helvetica;
  --inputFont: Helvetica;
}

/* body {
  margin: 0px;
  background-color: black;
} */

#playerUI {
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.statsContainer {
  background-color: rgba(0, 0, 0, 0.8);
  text-align: left;
  display: block;
  margin-top: 5px;
}

.stats {
  font-size: 14px;
  font-weight: bold;
  padding: 6px;
  color: lime;
}

canvas {
  image-rendering: crisp-edges;
  position: absolute;
}

video {
  /* position: absolute; */
  width: 100%;
  height: 100%;
}

#player {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
}
#streamingVideo {
  width: 100%;
  height: 100%;
}

#overlay {
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; /* future proofing */
  border-bottom-left-radius: 5px; /* future proofing */
  -khtml-border-bottom-right-radius: 5px; /* for old Konqueror browsers */
  -khtml-border-bottom-left-radius: 5px; /* for old Konqueror browsers */

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

  position: absolute;
  padding: 4px;
  top: 0;
  right: 2%;
  /* z-index: 100; */
  border: 2px solid var(--colour4);
  border-top-width: 0px;
}

.overlay {
  background-color: var(--colour2);
  font-family: var(--buttonFont);
  font-weight: lighter;
  color: var(--colour4);
}

.overlay-shown > #overlaySettings {
  padding: 50px 4px 4px 4px;
  box-sizing: border-box;
  display: block;
}

.overlay-shown > div > #overlayButton {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); /* Safari */
  -moz-transform: rotate(-135deg); /* Firefox */
  -ms-transform: rotate(-135deg); /* IE */
  -o-transform: rotate(-135deg); /* Opera */
}

#overlayButton:hover {
  cursor: pointer;
}

#overlayButton {
  transition-duration: 250ms;
  font-size: 28px;
}
#overlayButton img {
  width: 24px;
  height: 24px;
  display: block;
}
.status-top {
  width: 100%;
  height: 24px;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 10px;
}
#qualityStatus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

#overlaySettings {
  width: 100%;
  /* width: 400px; */
  display: none;
}
input {
  color: #000;
}

.greyStatus {
  color: grey;
  background: grey;
  box-shadow: 0 0 5px grey;
  -webkit-box-shadow: 0 0 5px grey;
  -moz-box-shadow: 0 0 5px grey;
}

.limeStatus {
  color: lime;
  background: lime;
  box-shadow: 0 0 5px lime;
  -webkit-box-shadow: 0 0 5px lime;
  -moz-box-shadow: 0 0 5px lime;
}

.orangeStatus {
  color: orange;
  background: orange;
  box-shadow: 0 0 5px orange;
  -webkit-box-shadow: 0 0 5px orange;
  -moz-box-shadow: 0 0 5px orange;
}

.redStatus {
  color: red;
  background: red;
  box-shadow: 0 0 5px red;
  -webkit-box-shadow: 0 0 5px red;
  -moz-box-shadow: 0 0 5px red;
}

#videoMessageOverlay {
  z-index: 20;
  color: var(--colour4);
  font-size: 1.8em;
  position: absolute;
  margin: auto;
  font-family: var(--inputFont);
  width: 100%;
}

#videoPlayOverlay {
  z-index: 30;
  position: absolute;
  color: var(--colour4);
  font-size: 1.8em;
  font-family: var(--inputFont);
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.7);
}

/* State for element to be clickable */
.clickableState {
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}

/* State for element to show text, this is for informational use*/
.textDisplayState {
  display: flex;
}

/* State to hide overlay, WebRTC communication is in progress and or is playing */
.hiddenState {
  display: none;
}

#playButton {
  display: inline-block;
  height: auto;
}

img#playButton {
  max-width: 241px;
  width: 10%;
}

#UIInteraction {
  position: fixed;
}

#UIInteractionButtonBoundary {
  padding: 2px;
}

#UIInteractionButton {
  cursor: pointer;
}

#hiddenInput {
  position: absolute;
  left: -10%; /* Although invisible, push off-screen to prevent user interaction. */
  width: 0px;
  opacity: 0;
}

#editTextButton {
  position: absolute;
  height: 40px;
  width: 40px;
}

.settings-text {
  color: var(--colour4);
  vertical-align: middle;
  font-size: 18px;
  font-weight: normal;
  display: inline-block;
}

.overlay-button {
  line-height: 1.1;
  padding: 1px 6px;
}

.btn-overlay {
  float: right;
  vertical-align: middle;
  display: inline-block;
}

.btn-flat {
  background: var(--colour4);
  border: 2px solid var(--colour5);
  font-weight: bold;
  cursor: pointer;
  font-family: var(--buttonFont);
  font-size: 10px;
  color: var(--colour5);
  border-radius: 5px;
  height: 20px;
}

.btn-flat:disabled {
  background: var(--colour4);
  border-color: var(--colour3);
  color: var(--colour3);
  cursor: default;
}

.btn-flat:active {
  border-color: var(--colour2);
  color: var(--colour2);
}

.btn-flat:focus {
  outline: none;
}
/*** Toggle Switch styles ***/
.tgl-switch {
  float: right;
  vertical-align: middle;
  display: inline-block;
}

.tgl-switch .tgl {
  display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl + .tgl-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl + .tgl-slider::-moz-selection {
  background: none;
}
.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl + .tgl-slider::selection {
  background: none;
}

.tgl-slider {
  float: right;
}

.tgl + .tgl-slider {
  outline: 0;
  display: block;
  width: 40px;
  height: 18px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tgl + .tgl-slider:after,
.tgl + .tgl-slider:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-slider:after {
  left: 0;
}
.tgl + .tgl-slider:before {
  display: none;
}

.tgl-flat + .tgl-slider {
  padding: 2px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: #fff;
  border: 3px solid var(--colour4);
  border-radius: 2em;
}

.tgl-flat + .tgl-slider:after {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  /* background: var(--colour4); */
  background: tomato;
  content: "";
  border-radius: 1em;
}

.tgl-flat:checked + .tgl-slider {
  border: 3px solid var(--colour5);
}

.tgl-flat:checked + .tgl-slider:after {
  left: 50%;
  /* background: var(--colour5); */
  background: lime;
}
/*** Toggle Switch styles ***/

#encoderSettings,
#webRTCSettings {
  margin: 10px 0px;
}

#encoderParamsContainer,
#webrtcParamsContainer {
  padding-left: 5%;
}

#encoder-params-submit {
  float: right;
}

#webrtc-params-submit {
  float: right;
}

select {
  text-align: right;
}

input {
  text-align: right;
}

.form-group {
  display: grid;
  grid-template-columns: 50% 50%;
}

.form-group label {
  color: var(--colour4);
  vertical-align: middle;
  font-size: 18px;
  font-weight: normal;
}

#latencyTest {
  display: block;
}

#latencyTest button {
  margin: 30px 0px;
}

#freezeFrameOverlay {
  background-color: transparent;
}

.freezeframeBackground {
  background-color: #000 !important;
}
</style>
